/*
增删改查 - crud 增加(Create)、读取(Read)、更新(Update)和删除(Delete)
1.查询
    1.定义一个函数
    2.发送请求 获取数据 渲染页面

 2 增加
    1 弹出和关闭 模态框 （2种方式）
      1 通过给标签增加属性即可 
        1 显示 data-bs-toggle="modal" data-bs-target="#addModal" 和 真实的模态框div的id 联系 
        2 隐藏 data-bs-dismiss="modal"
      2 通过 调用js代码来实现
        1 $("模态框的选择器").modal("show")
        2 $("模态框的选择器").modal("hide")

    2 初始化 模态框中 省市区 三个组件 （和早上讲额外作业业务很类似 ）
      1 初始化 组件函数
        1 发送请求拿数据 完成 组件的渲染 
      2 给省绑定change 事件触发了获取对应市 
      3 给市绑定change 事件触发了获取对应县

    3 给表单绑定提交事件
      1 获取表单，绑定事件
      2 阻止默认行为
      3 使用技巧 快速获取表单数据
      4 合法性校验 - 非空即可 
      5 调用接口 完成新增
      6 提示用户 恭喜用户
      7 关闭模态框
      8 刷新数据
      9 清空新增表单 
 */


//获取元素
const tbody = document.querySelector('tbody');
const province = document.querySelector("select[name=province]");//省
const city = document.querySelector("select[name=city]");//市
const county = document.querySelector("select[name=county]");//区
//编辑 和增加
const form = document.querySelector('form');
// 获取 添加按钮
const addBtn = document.querySelector(".add-btn");
//定义一个全局变量 id表示修改的id -> 隐藏域
// let id;


// 查询数据 功能
async function getData() {
  //发起请求
  const result = await axios({
    url: "/student/list",
  })
  // console.log(result);
  const html = result.data.data.reduce((beforeHTML, item) => {
    //解构
    const { id, name, age, sex, group, phone, salary, truesalary, province, city, county,
    } = item;
    return beforeHTML + `
        <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm update-btn" data-id="${id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm del-btn" data-id="${id}">删除</button>
        </td>
      </tr>
        `
  }, '');
  tbody.innerHTML = html;

};

// 初始化 省市区组件的函数
async function initSelect() {
  // 操作 省
  getSelectData("/geo/province", {}, "省", province);
}

// 封装统一请求城市数据和渲染标签函数
// url 请求的路径
// params 请求参数
// text 默认显示的文本
// target 给生生成的标签
async function getSelectData(url, params, text, target) {
  const result = await axios({
    url,
    params,
  });
  const html = result.data.reduce((beforeHTML, item) => {
    return beforeHTML + `<option value="${item}">${item}</option>`;
  }, `<option value=''>--${text}--</option>`);
  target.innerHTML = html;
}

getData();
initSelect();

// 绑定 province change事件
province.addEventListener("change", async function (e) {
  getSelectData("/geo/city", { pname: province.value }, "市", city);
  // 重置 区 标签
  // county.innerHTML = `<option value="">--县--</option>`;
  county.innerHTML = county.firstChild.outerHTML; // firstChild 获取 county第一个孩子 option，outerHTML 获取dom对应html模样
});

// 绑定 city change事件
city.addEventListener("change", async function (e) {
  getSelectData(
    "/geo/county",
    { pname: province.value, cname: city.value },
    "县",
    county
  );
});

// 给表单绑定提交事件
form.addEventListener("submit", async function (e) {
  e.preventDefault();
  // 快速获取表单的数据
  // 1 jquery 返回数据 字符串 a=1&b=&c=3
  // 2 form-serialize   a=1&b=2&c=3   === {a:1,b:'',c:3}   if(obj.b)
  // 3 formdata  需要自己去处理
  // 表单的验证 非空
  const data = serialize(form, { hash: true, empty: true }); // hash 获取对象  empty 空的字段也会被获取到
  // 判断当前是新增还是编辑
  const formTitle = document.querySelector("#addModalLabel").innerText;
  if (formTitle === "添加新学员") {
    delete data.id;
  }

  // 对对象做遍历，判断里面的值，如果有发现一个 为 空，就不再往下执行了，弹出提示框给用户
  // let isOK = true; // 默认字段全部都合法
  for (const key in data) {
    if (!data[key]) {
      // 不合法
      // isOK = false;
      toastr.error("请检查你的字段", "提示");
      // 终止 整改 提交事件的执行
      return;
      // break; // 只会终止 for循环，但是 for下面的代码还会执行
    }
  }

  let result;
  if (formTitle === "添加新学员") {
    // 调用接口，完成新增
    // 新增不需要带上id的 所以删除id即可
    // delete data.id;
    result = await axios({ url: "/student/add", method: "post", data });
  } else if (formTitle === "修改学员") {
    // 修改要多一个id属性
    // data.id = id;
    result = await axios({ url: "/student/update", method: "put", data });
  }

  if (result.data.code === 0) {
    toastr.success(result.data.message, "恭喜");
    $("#addModal").modal("hide");
    getData();
    form.reset(); // 重置 清空表单  dom.value=""
    // 下拉列表需要手动重置
    city.innerHTML = city.firstChild.outerHTML;
    county.innerHTML = county.firstChild.outerHTML;
  }
});
//给 编辑按钮绑定  事件委托 
tbody.addEventListener('click', async (e) => {
  const target = e.target;
  //判断点击是不是编辑按钮
  if (target.classList.contains('update-btn')) {
    //显示模态框
    $("#addModal").modal("show");
    //修改模态框的标题
    document.querySelector("#addModalLabel").innerText = "修改学员";
    //获取 id对应学员数据
    let id = target.dataset.id;
    //发送请求
    const result = await axios({
      url: "/student/one",
      params: { id }
    });
    const obj = result.data.data;
    getSelectData("/geo/city", { pname: obj.province }, "市", city);
    getSelectData(
      "/geo/county",
      { pname: obj.province, cname: obj.city },
      "县",
      county
    );
    //遍历 ,挨个给表单赋值
    for (const key in obj) {
      const formEle = document.querySelector(`[name=${key}]`);
      // formEle 不一定存在，所以需要先判断存在，然后再去使用
      // 单选框，应该是设置 checked属性，而不是 value属性
      if (formEle && key !== "sex") {
        formEle.value = obj[key];
      }
    };
    // 单独去设置 性别的选中
    // 找到性别单选框 同时  value 和 obj.sex 相同
    document.querySelector(`[name=sex][value=${obj.sex}]`).checked = true;
  }

  //删除功能
  else if (target.classList.contains('del-btn')) {
    const id = target.dataset.id;
    console.log(11);
    if (confirm('您确定要删除此信息？')) {
      const result = await axios({
        url: "/student/delete",
        method: 'delete',
        params: { id }
      });
      if (result.data.code === 0) {
        toastr.success('删除成功', '提示')
        getData();
      }
    }
  }
})


// 添加按钮点击
addBtn.addEventListener("click", function (e) {
  $("#addModal").modal("show");
  document.querySelector("#addModalLabel").innerText = "添加新学员";
});